<template>
	<div>
		<div class="banner" @click='handleBannerClick'>
			<img class="banner-img" src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg"/>
			<div class="banner-info">
				<div class="banner-title">
					大连圣亚海洋世界(AAAA景区)
				</div>
				<div class="banner-number">
					<span class='iconfont banner-icon'>&#xe659;</span>&nbsp;29
				</div>
			</div>
		</div>   
		<common-gallary :imgs='imgs' v-show='showGallary' @close='handleGallaryClose'></common-gallary>
	</div>
</template>

<script>
import CommonGallary from '../../../../../src/common/gallary/Gallary.vue'
export default {
	name:'DetailBanner',
	data(){
		return {
			showGallary:false,
			imgs:['http://img1.qunarzz.com/sight/p0/1807/5a/5af52cf60b80eec1a3.img.jpg_r_800x800_ba5674b1.jpg','http://img1.qunarzz.com/wugc/p241/201306/06/cd84979565f305ea93835fbb.jpg_r_800x800_3a8ecdb0.jpg']
		}	
	},
	components:{
		CommonGallary
	},
	methods:{
		handleBannerClick () {
			this.showGallary = true
		},
		handleGallaryClose () {
			this.showGallary = false
		}
	}
}
</script>

<style lang="stylus" scoped>
.banner
	position:relative
	overflow:hidden
	height:0
	padding-bottom:55%
	.banner-img
		width:100%
	.banner-info
		display:flex
		position:absolute
		left:0
		right:0
		bottom:0
		line-height:.6rem
		color:#fff
		background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
		.banner-title
			flex:1
			font-size:.32rem
			padding:0 .2rem
		.banner-number
			padding:0 .4rem
			margin-top:.14rem
			line-height:.4rem
			height:.32rem
			font-size:.24rem
			border-radius:.2rem
			background:rgba(0,0,0,.8)
			.banner-icon
				font-size:.24rem
</style>